<template>
<div class="login">
  <!-- 登录界面 -->
  <el-row :gutter="20">
      <el-col :span="8" :offset="8">
         <el-card >
                <div class="login_card">         
                    <div>当当美食</div>
                    <el-input  v-model="input_text" placeholder="请输入内容"><template slot="prepend">帐号</template></el-input>       
                    <el-input style="margin-top:20px;"  v-model="input_pass" placeholder="请输入密码" show-password><template slot="prepend">密码</template></el-input> 
                      <div >
                        <span><a href="/register">用户注册</a> </span>
                        <span>忘记密码?</span>
                      </div>        
                    <el-button type='primary'  style="width:100%;margin:25px 0;"  @click="showdenglu">用户登录</el-button>   
                       <el-divider >第三方登录</el-divider>
                    
                     <div>
                       <img src="../assets/img/QQ.png" >
                       <img src="../assets/img/wb.png" >
                       <img src="../assets/img/weix.png">
                     </div>

                 </div>   
         </el-card>
      </el-col> 
  </el-row>
  </div> 
</template>

<script>
export default {
   data(){
     return {
       radio:'',
       input_text:'',
       input_pass:''
     }
   },
   methods:{
     showdenglu(){
       console.log(1);
       var text='wuwu'
       var pass=123456
      if(this.input_text==text&&this.input_pass==pass){
          this.$message({
          showClose: true,
          message: '早安打工人！',
          type:'success'
        });
        // 将状态注册到vuex中
            this.$store.commit('update',true) ;        
            this.$router.push('/');
            localStorage.setItem("key", true);
        }else{  alert('你不是真正的打工人') }

     }
   }
}
</script>

<style  scoped>
   .login{
     width: 1300px;
      margin: auto;
     margin-top: 200px;
  
   }
   .login_card{
    
     padding: 0 30px;
     text-align: center;
   }
   .login_card>div:nth-child(1){
     font-family:   Times, serif;
     font-size: 26px;
     font-weight: 600;
     margin: 25px 0;
     color: #ff6767;
   }
    .login_card>div:nth-child(4){
     font-family:  'Times New Roman', Times, serif;
     font-size: 12px;
     margin-top: 8px;
     display: flex;
     justify-content: space-between;
     padding: 0 8px;
     color: #666;
   }
   .login_card>div:nth-child(7){
      display: flex;
      justify-content: space-between;
      padding: 0 45px;
      margin: 30px;

   }


</style>

